<template>
    <div id="box">
        <falsh v-show="show">
            <span>你还没有日记本。</span>
            <router-link to="/new/daily">马上创建一个吧</router-link>
        </falsh>
        <div  v-if="!show">
            <div id="tit">
                <a 
                    @click="isphoto=true"
                    :style="isphoto?style:''"
                >
                    <span class="fa fa-file-text-o"></span>
                    <span> 写文本日记</span>
                </a>
                <a @click="isphoto=false" :style="isphoto?'':style">
                    <span class="fa fa-photo"></span>
                    <span> 写照片日记</span>
                </a>
            </div>
            <select name="" id="group" v-model="arr1">
                <option 
                    :value="a._id" 
                    v-for="a in arr"
                >{{a.name}} <span>{{a.open?'公开':'私密'}}</span></option>
            </select>
            <div id="new">
                <router-link to="/new/daily">创建新的日记本</router-link>
            </div>
            <label for="files" ref="filetab" id="photo" v-show="!isphoto">选择照片</label>
            <input 
                type="file" 
                id="files" 
                style="display:none"
                @change="avatar"
                accept="image/jpeg,image/png,image/gif"
            >
            <textarea 
                v-model.trim="text" cols="30" rows="5"
                placeholder="记录生活点滴"
                @input="textInput"
            ></textarea>
            <button 
                id="btn" 
                @click="btn"
            >保存日记</button>
          
        </div>
    </div>
</template>

<script>
import {Selector,Group} from 'vux';
import falsh from '../components/Falsh.vue';
export default {
    data:function(){
        return {
            show:false,
            arr:[],
            arr1:"",
            isphoto:true,
            style:{
                "background-color": "#009AFF",
                border: "solid 1px #009AFF",
                color: "white",
            },
            text:"",
            file:{},
        }
    },
    components:{
        falsh,
        Selector,
        Group,
    },
    methods:{
        textInput(){
            // console.log(this.text.length);
        },
        // 上传头像
        avatar(e){
            console.dir(e.target.files[0])
            this.file = e.target.files[0];
            this.$refs.filetab.textContent = this.file.name;
        },
        btn(){
            if(this.isphoto){
                if(this.text.trim().length>0){
                    var data = {
                        content:this.text,
                        diaryID:this.arr1,
                    }
                    this.http.get("/diary/addlog",{params:data})
                    .then(res=>{
                        if(!res.data.err){
                            this.text ="";
                            this.layer.msg("日记发表成功")
                            window.location.href = "http://localhost:8080/#/new/day/me";
                        }
                    })         
                }else{
                    this.$vux.alert.show({
                        title:"未输入内容",
                        content:"随便说点什么",
                    });
                }
            }else{
                if(!this.file.name){
                    this.$vux.alert.show({
                        title:"没有图片",
                        content:"请先选择图片",
                    });
                    return;
                }
                if(!this.text){
                    this.$vux.alert.show({
                        title:"未输入内容",
                        content:"随便说点什么",
                    });
                    return;
                }
                var data = new FormData();
                data.append("day",this.file);
                data.append("diaryID",this.arr1);
                data.append("content",this.text);
                this.http({
                    method:"post",
                    url:"/diary/addlog",
                    data:data,
                    headers:{'Content-Type':'multipart/form-data'}
                })
                .then(res=>{
                    if(!res.data.err){
                        this.text ="";
                        this.layer.msg("日记发表成功")
                        window.location.href = "http://localhost:8080/#/new/day/me";
                    }
                })
            }
        },
        mount(){
           
            this.http.get('/diary/view')
            .then(res=>{
                if(res.data.err==5){
                    this.$vux.alert.show({
                        title:"请先登录",
                        content:"点击确定返回主页",
                        onHide(){
                            window.location.href="http://localhost:8080";
                        },
                    });
                }
                if(res.data.err==0){
                    if(res.data.data.length>0){
                        this.show =false;
                        this.arr =res.data.data.reverse();
                        this.arr1 = res.data.data[0]._id;
                    }else{
                        this.show =true;
                    }
                }
            })
        },
    },
    activated:function(){
        this.mount();
        this.$store.dispatch("word");
    },
}
</script>

<style scoped>
#box{
    padding: 20px;
}
#group{
    border-radius: 4px;
    border: solid 1px #999;
    width: 100%;
    height: 35px;
    margin-top: 20px;
    padding: 0 4%;
}
#tit{
    text-align: center;
    height: 36px;
    display: flex;
    justify-content: center;
}
#tit a{
    display: inline-block;
    border: solid 1px #999; 
    padding: 0px 10px;
    line-height: 36px;
    width: 50%;
    color: #999;
}
#tit a:nth-of-type(1){
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    border-right: none;
    
}
#tit a:nth-of-type(2){
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    border-left: none;
}
#photo{
    border: solid 1px #999;
    border-radius: 3px;
    padding: 5px;
    color: #333;
    display: inline-block;
    margin-top: 20px;
}
textarea{
    margin-top: 20px;
    border-radius: 4px;
    font-size: 18px;
    padding-left: 12px;
    padding-top: 5px;
}
#btn{
    border: solid 1px #009AFF;
    background-color: #009AFF;
    color: white;
    border-radius: 4px;
    padding: 5px 10px;
    margin: 8px 0;
}
#new{
    text-align: right;
}
#new a{
    font-size: 10px;
    /*background-color: red;*/
    padding: 2px 5px;
    border-radius: 4px;
    /*border: solid 1px #ccc;*/
}
</style>